<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['focus']);
const changeFocus = (userId: string, isFocus: boolean) => {
  emit('focus', userId, isFocus)
};
</script>

<template>
  <div class="page-home-recommend-developer flex gap-x-20 border-b-1 border-hex-fafafa border-solid py-20">
    <a :href="props.data.jump" target="_blank" class="flex-shrink-0">
      <img :data-src="props.data.photo" :alt="props.data.nickname" class="lozad size-52 overflow-hidden rounded-50%">
    </a>
    <div class="flex-grow overflow-hidden">
      <div class="flex-y-center justify-between gap-x-20">
        <a :href="props.data.jump" target="_blank" class="truncate text-16 text-#292929 font-500 leading-28">
          {{ props.data.nickname }}
        </a>
        <button
          type="button"
          class="h-28 flex-shrink-0 border-1 border-#345de2 rounded-6 bg-#fff px-12 py-5 text-12 text-#345de2 font-500 leading-16"
          @click.stop="changeFocus(props.data.userId, props.data.isFocus)"
          v-if="!props.data.focusButtonDisabled"
        >
          {{ props.data.isFocus ? $t('mobile.common.follow.cancel') : $t('mobile.common.follow.ok') }}
        </button>
      </div>
      <p class="line-clamp-2 mt-10 break-anywhere text-14 text-#575757 font-400 leading-22">{{ props.data.profile ? props.data.profile : $t('mobile.home.recommend.developer.empty') }}</p>

      <div class="mt-10 flex-y-center gap-20">
        <a
          v-for="(piece, i) in props.data.warehouseList"
          :key="i"
          :href="piece.jump"
          target="_blank"
          class="flex-y-center text-left text-12 color-hex-575757 font-400"
        >
          <div class="i-icons:repository mr-4 size-16"></div>
          <div class="line-clamp-1 h-16">{{ piece.warehouseName }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
